import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Layout, Row, Col, Table, Button, Modal, message } from 'antd';
import Search from './search';
import Edit from './edit';
import './list.less';

@inject('thesis')
@observer
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKeys: []
    };
    // this.setTabelSelectedKeys = this.setTabelSelectedKeys.bind(this);
  }

  pageSizeOptions = ['10', '20', '50', '100'];

  componentDidMount() {
    this.props.thesis.getList();
  }

  setTabelSelectedKeys = (keys) => {
    this.setState({
      selectedKeys: keys
    });
  }

  onPageChange = (page) => {
    this.props.thesis.getList(page, this.props.thesis.size);
  }

  onPageSizeChange = (page, size) => {
    this.props.thesis.getList(page, size);
  }

  onSearch = (params) => {
    this.props.thesis.search(params);
  }

  onDelete = () => {
    let that = this;
    Modal.confirm({
      title: '确定要删除选中论文吗?',
      content: '删除论文，将会删除该论文相关的所有信息',
      okType: 'danger',
      onOk() {
        that.delSuc();
      },
      onCancel() {
        // console.log('Cancel user delete');
      },
    });
  }

  onAdd = (thesis) => {
    this.props.thesis.setEditThesis(thesis);
    this.props.thesis.showEdit();
  }

  onCheck = (thesis) => {
    console.log('check thesis');
  }

  async delSuc() {
    await this.props.thesis.del(this.state.selectedKeys);
    message.success('删除论文成功');
    this.setState({ selectedKeys: [] });
  }

  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedKeys,
      onChange: this.setTabelSelectedKeys
    };
    const columns = [
      {
        title: '分类',
        dataIndex: 'type',
        width: 80,
        render: text => <span className="table-art-tags ellipsis" title={text}>{text}</span>,
      }, {
        title: '期刊名称',
        dataIndex: 'journal',
        width: 100,
        render: text => <span className="table-art-tags ellipsis" title={text}>{text}</span>,
      }, {
        title: '标题',
        dataIndex: 'title',
        width: 100,
        render: text => <span className="table-art-journal ellipsis" title={text}>{text}</span>,
      }, {
        title: '关键字',
        dataIndex: 'keyword',
        width: 120,
        render: text => <span className="table-art-title ellipsis" title={text}>{text}</span>,
      }, {
        title: '作者',
        width: 100,
        dataIndex: 'auth',
        render: text => <span className="table-art-tags ellipsis" title={text}>{text}</span>,
      }, {
        title: '发布时间',
        dataIndex: 'publishTime',
        width: 100,
        render: text => <span className="table-author ellipsis" title={text}>{text}</span>,
      }, {
        title: '摘要',
        width: 120,
        dataIndex: 'digest',
        render: text => <span className="table-author ellipsis" title={text}>{text}</span>,
      }, {
        title: '来源',
        dataIndex: 'action',
        width: 120,
        render: (text, record) => {
          return (
            <div className="button-group">
              <Button className="button-group" onClick={() => this.onCheck(record)}>查看</Button>
              <Button className="button-group" onClick={() => this.onAdd(record)}>编辑</Button>
            </div>
          )
        }
      }
    ];
    let tablePagination = {
      current: this.props.thesis.page,
      pageSize: this.props.thesis.size,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: this.pageSizeOptions,
      total: this.props.thesis.total,
      size: 'default',
      onChange: this.onPageChange.bind(this),
      onShowSizeChange: this.onPageSizeChange.bind(this),
      showTotal: () => '总数: ' + this.props.thesis.total,
    }

    let list = [];
    for (let i = 0; i < this.props.thesis.list.length; i++) {
      let item = this.props.thesis.list[i];
      list.push(item);
    };

    return (
      <Layout>
        <Row className="search-wrap">
          <Search doSearch={this.onSearch}></Search>
        </Row>
        <Layout className="user-content">
          <Edit></Edit>
          <Row className="op-wrap">
            <Button size="small" onClick={() => this.onAdd()}>添加论文</Button>
            <Button size="small" type="danger" disabled={this.state.selectedKeys.length === 0} onClick={() => this.onDelete(this.state.selectedKeys)}>删除论文</Button>
          </Row>
          <Row className="table-wrap">
            <Table bordered
              dataSource={list}
              columns={columns}
              rowSelection={rowSelection}
              pagination={tablePagination}
              loading={this.props.thesis.loading}
              rowKey="objectId"
              scroll={{ x: 1150 }} >
            </Table>
          </Row>
        </Layout>
      </Layout>
    );
  }
}